#include ("/_includes/_layout.html")
#@layout("首页", "wxmall,点步科技", "Wxmall社区","wxmall")
#define content() 
<div class="row">
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-success pull-right">当月</span>
                <h5>收入</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">#(totalIncome)</h1>
                <!-- <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                </div> -->
                <small>总收入</small>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-info pull-right">全年</span>
                <h5>订单</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">#(orderNum)</h1>
                <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                </div>
                <small>总订单数</small>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-primary pull-right">全部</span>
                <h5>总会员数</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">#(buyerCount)</h1>
                <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                </div>
                <small>会员</small>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-danger pull-right">已上架商品数</span>
                <h5>商品</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">#(productCount)</h1>
                <!-- <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i></div> -->
                <small>商品数</small>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>订单</h5>
                <div class="pull-right">
                    <div class="btn-group">
                        <!-- <button type="button" class="btn btn-xs btn-white active">天</button> -->
                        <button type="button" class="btn btn-xs btn-white">月报</button>
                        <!-- <button type="button" class="btn btn-xs btn-white">年</button> -->
                    </div>
                </div>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-9">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <ul class="stat-list">
                            <li>
                                <h2 class="no-margins">#(orderNum)</h2>
                                <small>订单总数</small>
                                <!-- <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i></div> -->
                                <div class="progress progress-mini">
                                    <div style="width: 48%;" class="progress-bar"></div>
                                </div>
                            </li>
                            <!-- <li>
                                <h2 class="no-margins ">4,422</h2>
                                <small>最近一个月订单</small>
                                <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                </div>
                                <div class="progress progress-mini">
                                    <div style="width: 60%;" class="progress-bar"></div>
                                </div>
                            </li>
                            <li>
                                <h2 class="no-margins ">9,180</h2>
                                <small>最近一个月销售额</small>
                                <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                </div>
                                <div class="progress progress-mini">
                                    <div style="width: 22%;" class="progress-bar"></div>
                                </div>
                            </li> -->
                          </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
#end
#define script()
<script src="#(webctx)/resources/assets/js/plugins/flot/jquery.flot.js"></script>
<script src="#(webctx)/resources/assets/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="#(webctx)/resources/assets/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="#(webctx)/resources/assets/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="#(webctx)/resources/assets/js/plugins/flot/jquery.flot.symbol.js"></script>
<!-- Jvectormap -->
<script src="#(webctx)/resources/assets/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="#(webctx)/resources/assets/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- Peity -->
<!-- <script src="#(webctx)/resources/assets/js/plugins/peity/jquery.peity.min.js"></script> -->
<script type="text/javascript" src="#(webctx)/resources/assets/js/plugins/easypiechart/jquery.easypiechart.js"></script>
<!-- <script src="#(webctx)/resources/assets/js/plugins/sparkline/jquery.sparkline.min.js"></script> -->
#end
<script type="text/javascript">
function gd(year, month, day) {
	return new Date(year, month - 1, day).getTime();
}
var searchdata = function(){
	obz.ajaxJson(obz.ctx+"/chartData", {}, function(json) {
  		 var dataMap =json.data;
  		 var dataList1 = dataMap.data1;//已支付订单数
  		 var dataList2 = dataMap.data2;//总订单数
  			//if(dataList1.length>0 && dataList2.length>0){
			$("#flot-dashboard-chart").empty();
			var data1 = new Array();
			var data2 = new Array();
			for(var i=0;i<dataList1.length;i++){
				var obj=[];
				obj.push(gd(dataList1[i].year,dataList1[i].month,dataList1[i].day));
				obj.push(dataList1[i].incomeNum);
				data1.push(obj);
			}
			for(var i=0;i<dataList2.length;i++){
				var obj=[];
				obj.push(gd(dataList2[i].year,dataList2[i].month,dataList2[i].day));
				obj.push(dataList2[i].incomeNum);
				data2.push(obj);
			}
		    $('.chart').easyPieChart({
		        barColor: '#f8ac59',
		        //                scaleColor: false,
		        scaleLength: 5,
		        lineWidth: 4,
		        size: 80
		    });
		
		    $('.chart2').easyPieChart({
		        barColor: '#1c84c6',
		        //                scaleColor: false,
		        scaleLength: 5,
		        lineWidth: 4,
		        size: 80
		    });
			 var dataset = [
			              {
			                  label: "总订单数",
			                  data: data1,
			                  color: "#1ab394",
			                  bars: {
			                      show: true,
			                      align: "center",
			                      barWidth: 24 * 60 * 60 * 600,
			                      lineWidth: 0
			                  }
		
			              }, {
			                  label: "已付款数",
			                  data: data2,
			                  yaxis: 2,
			                  color: "#464f88",
			                  lines: {
			                      lineWidth: 1,
			                      show: true,
			                      fill: true,
			                      fillColor: {
			                          colors: [{
			                              opacity: 0.2
			                          }, {
			                              opacity: 0.2
			                          }]
			                      }
			                  },
			                  splines: {
			                      show: false,
			                      tension: 0.6,
			                      lineWidth: 1,
			                      fill: 0.1
			                  },
			              }
			          ];
		
		
			          var options = {
			              xaxis: {
			                  mode: "time",
			                  tickSize: [3, "day"],
			                  tickLength: 0,
			                  axisLabel: "Date",
			                  axisLabelUseCanvas: true,
			                  axisLabelFontSizePixels: 12,
			                  axisLabelFontFamily: 'Arial',
			                  axisLabelPadding: 10,
			                  color: "#838383"
			              },
			              yaxes: [{
			                      position: "left",
			                     // max: ,
			                      color: "#838383",
			                      axisLabelUseCanvas: true,
			                      axisLabelFontSizePixels: 12,
			                      axisLabelFontFamily: 'Arial',
			                      axisLabelPadding: 3
			              }, {
			                      position: "right",
			                      clolor: "#838383",
			                      axisLabelUseCanvas: true,
			                      axisLabelFontSizePixels: 12,
			                      axisLabelFontFamily: ' Arial',
			                      axisLabelPadding: 67
			              }
			              ],
			              legend: {
			                  noColumns: 1,
			                  labelBoxBorderColor: "#000000",
			                  position: "nw"
			              },
			              grid: {
			                  hoverable: false,
			                  borderWidth: 0,
			                  color: '#838383'
			              }
			          };
			        $.plot($("#flot-dashboard-chart"), dataset, options);
		//}  			
		  });	
}
   
$(document).ready(function () {
	searchdata();
});
</script>